<template>
  <div style="float: left">
    <div class="todo-home">
      <!-- todo导航 -->
      <div class="todo-home-nav">
        <close-navigation :height="25"></close-navigation>
        <!--日历-->
        <div class="todo-nav-item">
            <mu-date-picker :date.sync="calendarValue"></mu-date-picker>
        </div>
        <!--最近访问-->
        <div class="todo-nav-item todo-nav-recent">
            <div class="todo-nav-item-span">最近访问</div>
            <div class="todo-nav-item-box">
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
              <span class="todo-nav-item-list">计划1</span>
            </div>

        </div>
        <!-- 归档 -->
<!--        <div class="todo-nav-item todo-nav-recent">-->
<!--          <div class="todo-nav-item-span">归档</div>-->
<!--          <div style="padding-left: 15px">-->
<!--            <span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" type="success" effect="dark">文件</el-tag>-->
<!--            </span>-->
<!--            <span class="todo-nav-file-list">-->
<!--               <el-tag size="mini" type="info" effect="dark">文件</el-tag>-->
<!--            </span>-->
<!--            <span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" type="danger" effect="dark">文件</el-tag>-->
<!--            </span>-->
<!--            <span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span><span class="todo-nav-file-list">-->
<!--              <el-tag size="mini" effect="dark">文件</el-tag>-->
<!--            </span>-->

<!--          </div>-->
<!--        </div>-->
      </div>

      <!-- todo内容列表 -->
      <div class="todo-home-body">
        <close-navigation :height="25" :show-close="true"></close-navigation>
        <div class="todo-home-body-content">
          <!-- to-do未完成列表页 -->
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import CloseNavigation from '@/components/CloseNavigation.vue';
import TaskInfo from '@/views/todo/TaskInfo.vue';
import TodoNavigationNew from '@/components/taskandtodo/TodoNavigationNew.vue';


@Component({
  components: {
    CloseNavigation,
    TaskInfo,
    TodoNavigationNew,
  },
})
export default class Home extends Vue {
  // @Getter @Action 在vuex-class 包内
  // 这里使用 ！ 是说明 属性不会为undefined 否则需要进行初始化操作
  // @Getter
  // public getToken !: string;
  //
  // @Action('setToken')
  // public setToken !: Function;
  private calendarValue: any = new Date();
}
</script>
<style lang="scss">
.todo-home {
  height: 100vh;
  width: 100%;

  .todo-home-nav {
    position: relative;
    width: 250px;
    height: 100%;
    float: left;
    background: #faf9f7;
    padding-top: 25px;

    /* 修改默认日历样式 */
    .mu-picker {
      width: 250px;
      background-color: #faf9f7;
      .mu-picker-display {
        display: none;
      }
      .mu-day-button-bg {
        left: 2.5px;
        top: 3px;
        width: 29px;
        height: 29px;
      }
    }

    .todo-nav-item {
      float: left;
    }

    .todo-nav-recent {
      width: 100%;
      .todo-nav-item-span {
        padding-left: 15px;
      }
      .todo-nav-item-box {
        max-height: 170px;
        overflow-y: auto;
        .todo-nav-item-list {
          display: block;
          padding-left: 30px;
          padding-top: 3px;
        }
      }
      .todo-nav-file-list {
        cursor: pointer;
        display: inline-block;
        margin: 5px 5px;
      }

    }
  }

  .todo-home-body {
    position: relative;
    width: calc(100vw - 310px);
    height: 100%;
    float: right;
    background: #ffffff;
    padding: 25px 0 0 0;

    .todo-home-body-content {
      height: calc(100vh - 20px);
      padding: 0 10px;
      position: relative;
    }
  }
}
</style>
